<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Battlenet Shop</title>
    <link rel="stylesheet" href="../css/TBreset.css" />
    <link rel="stylesheet" href="../css/01.css" />
    <link rel="stylesheet" href="../js/01.js" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3205612_blzb52ttrk4.css"
    />
    <script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
    <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <!-- ***大 -->
    <div id="big">
      <!-- ***一 -->
      <div id="Header">
        <a href="battlenet shop.html"><img src="../images/LOG.jpg" alt="" /></a>
        <ul id="ul1">
          <li><span class="iconfont icon-download"></span>下载战网</li>
          <li>支持</li>
          <li class="li3">
            我的账户<span class="iconfont icon-xiajiantou"></span>
          </li>
          <span class="iconfont icon-shangjiantou-copy"></span>
        </ul>
        <div id="bg">这是遮罩层</div>
        <div id="triangle"></div>
        <ul id="ul2">
          <li><button id="loginBtn">登录</button></li>
          <li></li>
          <li class="iconfont icon-setting"><span>账户</span></li>
          <li class="iconfont icon-tianjiayonghu signBtn">
            <span>免费注册</span>
          </li>
        </ul>
      </div>
      <!-- ***二 -->
      <div id="Nav">
        <ul id="ul3">
          <li class="li1">
            <span class="span1">总览</span
            ><span class="iconfont icon-xiajiantou2-copy span2"></span>
          </li>
          <li
            class="iconfont icon-Fangdajing"
            style="color: #c2c2c2; font-size: 26px"
          >
            <input type="search" placeholder="搜索商城" />
          </li>
          <li class="li3"><span class="iconfont icon-heart spanHeart"></span></li>
          <li class="li4">
            战网点数<span class="iconfont icon-xiajiantou3-copy"></span>
          </li>
        </ul>
        <!-- 总览下边框 -->
        <div id="zlXia1"></div>
        <div id="zlXia2"></div>

        <!-- 总览 -->
        <div id="zonglan">
          <ul id="ul4">
            <li>游戏</li>
            <li>
              <span><img src="../images/01.jpg" alt="" /></span>&nbsp; 魔兽世界
            </li>
            <li>
              <span><img src="../images/02.jpg" alt="" /></span>&nbsp;
              魔兽世界(经典怀旧服)
            </li>
            <li>
              <span><img src="../images/03.jpg" alt="" /></span>&nbsp; 炉石传说
            </li>
            <li>
              <span><img src="../images/04.jpg" alt="" /></span>&nbsp; 守望先锋
            </li>
            <li>
              <span><img src="../images/05.jpg" alt="" /></span>&nbsp;
              暗黑破坏神III
            </li>
          </ul>
          <ul id="ul5">
            <li></li>
            <li>
              <span><img src="../images/06.jpg" alt="" /></span>&nbsp;
              星际争霸II
            </li>
            <li>
              <span><img src="../images/07.jpg" alt="" /></span>&nbsp; 星际争霸
            </li>
            <li>
              <span><img src="../images/08.jpg" alt="" /></span>&nbsp;
              魔兽争霸III
            </li>
            <li>
              <span><img src="../images/09.jpg" alt="" /></span>&nbsp; 风暴英雄
            </li>
          </ul>
          <ul id="ul6">
            <li>服务</li>
            <li>战网昵称修改服务</li>
            <li>使用兑换码</li>
            <li>周边商城</li>
          </ul>
        </div>
      </div>
      <!-- 三 -->
      <!-- 轮播图 -->
      <div id="slideshow">
        <ul id="ul7">
          <li style="opacity: 1"><img src="../images/WoW.jpg" alt="" /></li>
          <li><img src="../images/WOW (2).jpg" alt="" /></li>
          <li><img src="../images/OW.jpg" alt="" /></li>
          <li><img src="../images/HS.jpg" alt="" /></li>
        </ul>
        <button id="rightBtn">&gt;</button>
        <button id="leftBtn">&lt;</button>
        <ul id="ul8">
          <li class="li1" style="background-color: blue"></li>
          <li class="li2"></li>
          <li class="li3"></li>
          <li class="li4"></li>
        </ul>
        <ul id="ul9">
          <li class="li1" style="display: block">
            <span class="iconfont icon-zanting kai"></span>
          </li>
          <li class="li2" style="color: #fff">
            <span class="iconfont icon-zanting1 zan"></span>
          </li>
        </ul>
      </div>
      <!-- 四 -->
      <!-- 注册页 -->

      <!-- 五 -->
      <!-- 登录 -->

      <!-- 六 -->
      <ul id="ul10">
        <li><img src="../images/logs.jpg" alt="" /></li>
      </ul>

      <!-- 七 -->
      <!-- 返回顶部 -->
      <div id="Top">
        <span class="iconfont icon-shuangshangjiantou-"></span>
      </div>

      <!-- 八 -->
      <div id="Recommend">
        <h1>推荐</h1>
        <!-- <button id="addBtn">添加商品</button>
        <div id="send">
          商品图片: <input type="text" name="" id="" /><br /><br />
          商品名称: <input type="text" name="" id="" /><br /><br />
          商品详情: <input type="text" name="" id="" /><br /><br />
          商品价格: <input type="text" name="" id="" /><br />
          <input type="button" value="发布商品" id="issue"/>
        </div>

        <div id="update">
          商品图片: <input type="text" name="" id="" /><br /><br />
          商品名称: <input type="text" name="" id="" /><br /><br />
          商品详情: <input type="text" name="" id="" /><br /><br />
          商品价格: <input type="text" name="" id="" /><br />
          <input type="button" value="保存商品信息" />
        </div> -->
        <!--  宽290  间距8.5  高953.5 -->
        <div id="recommend">
          <ul class="ul1">
            <a href="details.html" style="text-decoration: none;">
              <li><img src="../images/推荐/01.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:"暗影国度"数字典藏礼包</li>
            <li>立即进入暗影界!现已上线</li>
            <li>礼包</li>
            <li>￥ 198 起</li></a>
          </ul>
          <ul class="ul2">
            <a href="details2.html" style="text-decoration: none;">
              <li><img src="../images/推荐/02.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:游戏时间</li>
            <li>欢迎进入"暗影国度","燃烧的远征"!</li>
            <li>大型多人角色扮演游戏</li>
            <li>￥ 75 起</li></a>>
          </ul>
          <ul class="ul3">
            <a href="details3.html" style="text-decoration: none;">
            <li><img src="../images/推荐/03.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>"暴风城下的集结"卡牌包</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li></a>
          </ul>
          <ul class="ul4">
            <a href="details4.html" style="text-decoration: none;">
            <li><img src="../images/推荐/04.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>探寻沉没之城</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li></a>
          </ul>
          <ul class="ul5">
            <a href="details5.html" style="text-decoration: none;">
            <li><img src="../images/推荐/05.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>《炉石传说®》</li>
            <li></li>
            <li>策略类卡牌游戏</li>
            <li>免费游戏</li></a>
          </ul>
          <ul class="ul6">
            <a href="details6.html" style="text-decoration: none;">
            <li><img src="../images/推荐/06.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》:数字畅玩版</li>
            <li></li>
            <li>团队动作游戏</li>
            <li>￥ 98</li></a>
          </ul>
          <ul class="ul7">
            <a href="details7.html" style="text-decoration: none;">
            <li><img src="../images/推荐/07.jpg" alt="" /></li>
            <li>
              <img src="../images/06.jpg" alt="" /><span>星际争霸II</span>
            </li>
            <li>《星际争霸®II》</li>
            <li></li>
            <li>即时策略游戏</li>
            <li>免费游戏</li></a>>
          </ul>
          <ul class="ul8">
            <a href="details8.html" style="text-decoration: none;">
            <li><img src="../images/推荐/08.jpg" alt="" /></li>
            <li><img src="../images/09.jpg" alt="" /><span>风暴英雄</span></li>
            <li>《风暴英雄™》</li>
            <li></li>
            <li>多人在线战术竞技游戏</li>
            <li>免费游戏</li></a>>
          </ul>
          <ul class="ul9">
            <a href="details9.html" style="text-decoration: none;">
            <li><img src="../images/推荐/09.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》游戏货币:赠送周年补给</li>
            <li>下架时间:2022年4月27日</li>
            <li>可解锁内容</li>
            <li>￥ 12 起</li></a>>
          </ul>
          <ul class="ul10">
            <a href="details10.html" style="text-decoration: none;">
            <li><img src="../images/推荐/10.jpg" alt="" /></li>
            <li>
              <img src="../images/05.jpg" alt="" /><span>暗黑破坏神III</span>
            </li>
            <li>《暗黑破坏神®III:夺魂之镰》</li>
            <li></li>
            <li>动作角色扮演游戏</li>
            <li>￥ 198 起</li></a>>
          </ul>
        </div>
      </div>

      <!-- 九 -->
      <div id="Recommend">
        <h1>精选</h1>
        <!--  宽290  间距8.5  高953.5 -->
        <div id="recommend">
          <ul class="ul1">
            <li><img src="../images/推荐/01.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:"暗影国度"数字典藏礼包</li>
            <li>立即进入暗影界!现已上线</li>
            <li>礼包</li>
            <li>￥ 198 起</li>
          </ul>
          <ul class="ul2">
            <li><img src="../images/推荐/02.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:游戏时间</li>
            <li>欢迎进入"暗影国度","燃烧的远征"!</li>
            <li>大型多人角色扮演游戏</li>
            <li>￥ 75 起</li>
          </ul>
          <ul class="ul3">
            <li><img src="../images/推荐/03.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>"暴风城下的集结"卡牌包</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul4">
            <li><img src="../images/推荐/04.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>探寻沉没之城</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul5">
            <li><img src="../images/推荐/05.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>《炉石传说®》</li>
            <li></li>
            <li>策略类卡牌游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul6">
            <li><img src="../images/推荐/06.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》:数字畅玩版</li>
            <li></li>
            <li>团队动作游戏</li>
            <li>￥ 98</li>
          </ul>
          <ul class="ul7">
            <li><img src="../images/推荐/07.jpg" alt="" /></li>
            <li>
              <img src="../images/06.jpg" alt="" /><span>星际争霸II</span>
            </li>
            <li>《星际争霸®II》</li>
            <li></li>
            <li>即时策略游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul8">
            <li><img src="../images/推荐/08.jpg" alt="" /></li>
            <li><img src="../images/09.jpg" alt="" /><span>风暴英雄</span></li>
            <li>《风暴英雄™》</li>
            <li></li>
            <li>多人在线战术竞技游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul9">
            <li><img src="../images/推荐/09.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》游戏货币:赠送周年补给</li>
            <li>下架时间:2022年4月27日</li>
            <li>可解锁内容</li>
            <li>￥ 12 起</li>
          </ul>
          <ul class="ul10">
            <li><img src="../images/推荐/10.jpg" alt="" /></li>
            <li>
              <img src="../images/05.jpg" alt="" /><span>暗黑破坏神III</span>
            </li>
            <li>《暗黑破坏神®III:夺魂之镰》</li>
            <li></li>
            <li>动作角色扮演游戏</li>
            <li>￥ 198 起</li>
          </ul>
        </div>
      </div>

      <!-- 十 -->
      <div id="Recommend">
        <h1>当下流行</h1>
        <!--  宽290  间距8.5  高953.5 -->
        <div id="recommend">
          <ul class="ul1">
            <li><img src="../images/推荐/01.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:"暗影国度"数字典藏礼包</li>
            <li>立即进入暗影界!现已上线</li>
            <li>礼包</li>
            <li>￥ 198 起</li>
          </ul>
          <ul class="ul2">
            <li><img src="../images/推荐/02.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:游戏时间</li>
            <li>欢迎进入"暗影国度","燃烧的远征"!</li>
            <li>大型多人角色扮演游戏</li>
            <li>￥ 75 起</li>
          </ul>
          <ul class="ul3">
            <li><img src="../images/推荐/03.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>"暴风城下的集结"卡牌包</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul4">
            <li><img src="../images/推荐/04.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>探寻沉没之城</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul5">
            <li><img src="../images/推荐/05.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>《炉石传说®》</li>
            <li></li>
            <li>策略类卡牌游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul6">
            <li><img src="../images/推荐/06.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》:数字畅玩版</li>
            <li></li>
            <li>团队动作游戏</li>
            <li>￥ 98</li>
          </ul>
          <ul class="ul7">
            <li><img src="../images/推荐/07.jpg" alt="" /></li>
            <li>
              <img src="../images/06.jpg" alt="" /><span>星际争霸II</span>
            </li>
            <li>《星际争霸®II》</li>
            <li></li>
            <li>即时策略游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul8">
            <li><img src="../images/推荐/08.jpg" alt="" /></li>
            <li><img src="../images/09.jpg" alt="" /><span>风暴英雄</span></li>
            <li>《风暴英雄™》</li>
            <li></li>
            <li>多人在线战术竞技游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul9">
            <li><img src="../images/推荐/09.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》游戏货币:赠送周年补给</li>
            <li>下架时间:2022年4月27日</li>
            <li>可解锁内容</li>
            <li>￥ 12 起</li>
          </ul>
          <ul class="ul10">
            <li><img src="../images/推荐/10.jpg" alt="" /></li>
            <li>
              <img src="../images/05.jpg" alt="" /><span>暗黑破坏神III</span>
            </li>
            <li>《暗黑破坏神®III:夺魂之镰》</li>
            <li></li>
            <li>动作角色扮演游戏</li>
            <li>￥ 198 起</li>
          </ul>
        </div>
      </div>

      <!-- 十一 -->
      <div id="Recommend">
        <h1>热门赠礼</h1>
        <div id="recommend">
          <ul class="ul1">
            <li><img src="../images/推荐/01.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:"暗影国度"数字典藏礼包</li>
            <li>立即进入暗影界!现已上线</li>
            <li>礼包</li>
            <li>￥ 198 起</li>
          </ul>
          <ul class="ul2">
            <li><img src="../images/推荐/02.jpg" alt="" /></li>
            <li><img src="../images/01.jpg" alt="" /><span>魔兽世界</span></li>
            <li>《魔兽世界®》:游戏时间</li>
            <li>欢迎进入"暗影国度","燃烧的远征"!</li>
            <li>大型多人角色扮演游戏</li>
            <li>￥ 75 起</li>
          </ul>
          <ul class="ul3">
            <li><img src="../images/推荐/03.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>"暴风城下的集结"卡牌包</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul4">
            <li><img src="../images/推荐/04.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>探寻沉没之城</li>
            <li></li>
            <li>卡牌包</li>
            <li>180 奥术宝珠 起</li>
          </ul>
          <ul class="ul5">
            <li><img src="../images/推荐/05.jpg" alt="" /></li>
            <li><img src="../images/03.jpg" alt="" /><span>炉石传说</span></li>
            <li>《炉石传说®》</li>
            <li></li>
            <li>策略类卡牌游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul6">
            <li><img src="../images/推荐/06.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》:数字畅玩版</li>
            <li></li>
            <li>团队动作游戏</li>
            <li>￥ 98</li>
          </ul>
          <ul class="ul7">
            <li><img src="../images/推荐/07.jpg" alt="" /></li>
            <li>
              <img src="../images/06.jpg" alt="" /><span>星际争霸II</span>
            </li>
            <li>《星际争霸®II》</li>
            <li></li>
            <li>即时策略游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul8">
            <li><img src="../images/推荐/08.jpg" alt="" /></li>
            <li><img src="../images/09.jpg" alt="" /><span>风暴英雄</span></li>
            <li>《风暴英雄™》</li>
            <li></li>
            <li>多人在线战术竞技游戏</li>
            <li>免费游戏</li>
          </ul>
          <ul class="ul9">
            <li><img src="../images/推荐/09.jpg" alt="" /></li>
            <li><img src="../images/04.jpg" alt="" /><span>守望先锋</span></li>
            <li>《守望先锋®》游戏货币:赠送周年补给</li>
            <li>下架时间:2022年4月27日</li>
            <li>可解锁内容</li>
            <li>￥ 12 起</li>
          </ul>
          <ul class="ul10">
            <li><img src="../images/推荐/10.jpg" alt="" /></li>
            <li>
              <img src="../images/05.jpg" alt="" /><span>暗黑破坏神III</span>
            </li>
            <li>《暗黑破坏神®III:夺魂之镰》</li>
            <li></li>
            <li>动作角色扮演游戏</li>
            <li>￥ 198 起</li>
          </ul>
        </div>
      </div>

      <!-- 十二 -->
      <div id="Footer">
        <div id="footer">
          <ul id="ul11">
            <li><h1>下载战网</h1></li>
            <li><span>一站式畅享暴雪游戏</span></li>
            <li><span>跟好友保持联络</span></li>
            <li><span>购买数字版游戏和商品</span></li>
            <li><input type="button" value="下载Windows版本" /></li>
            <li><input type="button" value="了解详情" /></li>
            <li>同时提供<span>移动应用</span></li>
          </ul>
        </div>
        <span class="span4"
          ><img src="../images/phoenix_zhcn.jpg" alt=""
        /></span>
      </div>
    </div>

    <!-- ***引入js -->
    <script src="../js/01.js"></script>
    <!-- <script>

    </script> -->
  </body>
</html>
